<!---

                       _oo0oo_
                      o8888888o
                      88" . "88
                      (| -_- |)
                      0\  =  /0
                    ___/`---'\___
                  .' \\|     |// '.
                 / \\|||  :  |||// \
                / _||||| -:- |||||- \
               |   | \\\  -  /// |   |
               | \_|  ''\---/''  |_/ |
               \  .-\__  '-'  ___/-. /
             ___'. .'  /--.--\  `. .'___
          ."" '<  `.___\_<|>_/___.' >' "".
         | | :  `- \`.;`\ _ /`;.`/ - ` : | |
         \  \ `_.   \_ __\ /__ _/   .-` /  /
     =====`-.____`.___ \_____/___.-`___.-'=====
                       `=---='

代码已开光，请放心使用！
弱智代码，拒绝任何批评！！！
by 中国区 紫水桥栈 鸾知    
--->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>仙人微彩计算器</title>
</head>

<link href="https://cdn.staticfile.org/ionic/1.3.2/css/ionic.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/ionic/1.3.2/js/ionic.bundle.min.js"></script>
<style>
    #A {
        background: #C0C0C0;
    }

    #B {
        background: #FF00FF;
    }

    #C {
        background: #00FFFF;
    }

    #D {
        background: #FFFF00;
    }

    #E {
        background: #22AADD;
    }

    #F {
        background: #00FF00;
    }

    #G {
        background: #FF0000;
    }

    #H {
        background: #FFAA66;
    }

    div[class="weicai"] {
        width: 400px;
        margin: 20px auto;
    }

    div[class="col"] {
        border: 1px solid green;
        text-align: center;
    }

    #app {
        overflow: visible;
    }

    #setting {
        float: left;
    }
</style>

<script>
    var app = angular.module('box', ['ionic']);
    app.controller('weicai', function ($scope, $ionicModal) {

        document.getElementsByClassName('show')[0].style.display = "none";

        $scope.num = true;
        chosen_num = 0;
        counts = 4;

        line_str = "";
        str_A = "";
        str_B = "";
        str_C = "";
        str_D = "";
        str_E = "";
        str_F = "";
        str_G = "";
        str_H = "";

        char_index = new Array('A', 'B', 'C', 'D', 'E', 'F', 'G', 'H');

        box = new Array([9]);
        for (i = 0; i < 9; i++) {
            box[i] = 0;
        }

        function initBox() {
            ava_box = new Array();
            line_mean = new Array([8]);
            for (i = 0; i < 8; i++) {
                line_mean[i] = 0;
            }
            line_A = new Array([19]);
            for (i = 0; i < 19; i++) {
                line_A[i] = 0;
            }
            line_B = new Array([19]);
            for (i = 0; i < 19; i++) {
                line_B[i] = 0;
            }
            line_C = new Array([19]);
            for (i = 0; i < 19; i++) {
                line_C[i] = 0;
            }
            line_D = new Array([19]);
            for (i = 0; i < 19; i++) {
                line_D[i] = 0;
            }
            line_E = new Array([19]);
            for (i = 0; i < 19; i++) {
                line_E[i] = 0;
            }
            line_F = new Array([19]);
            for (i = 0; i < 19; i++) {
                line_F[i] = 0;
            }
            line_G = new Array([19]);
            for (i = 0; i < 19; i++) {
                line_G[i] = 0;
            }
            line_H = new Array([19]);
            for (i = 0; i < 19; i++) {
                line_H[i] = 0;
            }
        }
        initBox();
        // award = new Array(10000, 36, 720, 360, 80, 252, 108, 72, 54, 180, 72, 180, 119, 36, 360, 1080, 144, 1800, 3600);
        award = new Array();
        var money = document.getElementById('money').getElementsByClassName('col');
        for (i = 0; i < money.length; i++) {
            award.push(parseInt(money[i].innerHTML))
        }


        $scope.reset = function (e) {
            location.reload();
        }


        function checkNumList(num, list) {
            for (var i = 0; i < list.length; i++)
                if (num == list[i])
                    return true;
            return false;
        }
        function countZero(list) {
            var ans = 0;
            for (var i = 0; i < list.length; i++)
                if (0 == list[i])
                    ans += 1;
            return ans;
        }
        function calLine(line, a, b, c) {
            var not_zero_count = countZero(new Array(box[a], box[b], box[c]))
            var ava_count = ava_box.length;
            if (not_zero_count == 0) {
                line[box[a] + box[b] + box[c] - 6] += 1;
            }
            else if (not_zero_count == 1) {
                for (i = 0; i < ava_count; i++) {
                    line[box[a] + box[b] + box[c] + ava_box[i] - 6] += 1;
                }
            }
            else if (not_zero_count == 2) {
                for (i = 0; i < (ava_count - 1); i++) {
                    for (j = i + 1; j < ava_count - 1; j++) {
                        line[box[a] + box[b] + box[c] + ava_box[i] + ava_box[j] - 6] += 1;
                    }
                }
            }
            else if (not_zero_count == 3) {
                for (i = 0; i < (ava_count - 2); i++) {
                    for (j = i + 1; j < (ava_count - 1); j++) {
                        for (k = j + 1; k < ava_count; k++) {
                            line[ava_box[i] + ava_box[j] + ava_box[k] - 6] += 1;
                        }
                    }
                }
            }
        }
        function calSum(list) {
            var sum = 0;
            for (i = 0; i < list.length; i++) {
                sum += list[i];
            }
            return sum;
        }
        function showP(list, index) {
            var str = "";
            var count_sum = calSum(list);
            var index_list = new Array();
            var mean = 0;
            for (i = 0; i < list.length; i++) {
                if (list[i] != 0) {
                    index_list.push(i);
                }
            }
            for (i = 0; i < index_list.length; i++) {
                mean += award[index_list[i]] * list[index_list[i]] / count_sum;
            }
            mean = parseInt(mean + 0.5);
            line_mean[index] = mean;

            str += "<div class='row'><div class='col'>期望</div>";
            for (i = 0; i < index_list.length; i++) {
                str += "<div class='col'>" + award[index_list[i]] + "</div>";
            }
            str += "</div>"
            str += "<div class='row'><div class='col'>" + mean + "</div>";
            for (i = 0; i < index_list.length; i++) {
                str += "<div class='col'>" + parseInt((list[index_list[i]] / count_sum * 100) + 0.5) + "% </div>";
            }
            str += "</div>";
            return str;
        }
        function showMean() {
            var min_val = 10001;
            var min_index = new Array();
            var max_val = 0;
            var max_index = new Array();
            for (i = 0; i < line_mean.length; i++) {
                if (line_mean[i] < min_val) {
                    min_val = line_mean[i];
                }
                if (line_mean[i] > max_val) {
                    max_val = line_mean[i];
                }
            }
            for (i = 0; i < line_mean.length; i++) {
                if (line_mean[i] == min_val) {
                    min_index.push(i);
                }
                if (line_mean[i] == max_val) {
                    max_index.push(i);
                }
            }
            var max_list = "";
            var min_list = "";
            for (i = 0; i < min_index.length; i++) {
                min_list += char_index[min_index[i]] + ' ';
            }
            for (i = 0; i < max_index.length; i++) {
                max_list += char_index[max_index[i]] + ' ';
            }
            line_str = "<div class='row'><div class='col'>最大期望</div><div class='col'>最小期望</div></div>" +
                "<div class='row'><div class='col'>" + max_val + "</div><div class='col'>" + min_val + "</div></div>" +
                "<div class='row'><div class='col'>" + max_list + "</div><div class='col'>" + min_list + "</div></div>";
            document.getElementById('cardMean').innerHTML = line_str;
            return max_index;
        }
        function showEachMean() {
            for (i = 0; i < char_index.length; i++) {
                var mean_str = "(" + line_mean[i] + ")";
                while (mean_str.length < 6) {
                    mean_str = "&nbsp;" + mean_str;
                }
                var str = char_index[i] + mean_str;
                document.getElementById(char_index[i]).innerHTML = str;
            }
        }
        function min(list, val, index) {
            var min_ = 10001;
            var index_ = -1;
            for (i = 0; i < list.length; i++) {
                if (line_mean[i] < min_) {
                    min_ = line_mean[i];
                    index_ = i;
                }
            }
            val = min_;
            index = index_;
        }
        function max(list, val, index) {
            var max_ = 0;
            var index_ = -1;
            for (i = 0; i < list.length; i++) {
                if (line_mean[i] > max_) {
                    max_ = line_mean[i];
                    index_ = i;
                }
            }
            val = max_;
            index = index_;
        }
        function solve() {
            // if (counts) return;
            clearBox();
            initBox();
            for (var i = 0; i < 9; i++) {
                if (!checkNumList(i + 1, box)) {
                    ava_box.push(i + 1);
                }
            }

            calLine(line_A, 2, 4, 6);
            calLine(line_B, 2, 5, 8);
            calLine(line_C, 1, 4, 7);
            calLine(line_D, 0, 3, 6);
            calLine(line_E, 0, 4, 8);
            calLine(line_F, 0, 1, 2);
            calLine(line_G, 3, 4, 5);
            calLine(line_H, 6, 7, 8);

            //A
            str_A = showP(line_A, 0);
            //B
            str_B = showP(line_B, 1);
            //C
            str_C = showP(line_C, 2);
            //D
            str_D = showP(line_D, 3);
            //E
            str_E = showP(line_E, 4);
            //F
            str_F = showP(line_F, 5);
            //G
            str_G = showP(line_G, 6);
            //H
            str_H = showP(line_H, 7);

            var max_index = showMean();
            for (i = 0; i < max_index.length; i++) {
                colorShow(char_index[max_index[i]]);
            }
            showEachMean();
            // setBackground('box_13', 'box_22', 'box_31', '#C0C0C0', str_A);

            document.getElementsByClassName('show')[0].style.display = "block";

        }
        $scope.cal = function (e) {
            solve();
        }

        //清楚九宫格的背景颜色
        function clearBox() {
            document.getElementById('box_11').style.background = "inherit";
            document.getElementById('box_12').style.background = "inherit";
            document.getElementById('box_13').style.background = "inherit";
            document.getElementById('box_21').style.background = "inherit";
            document.getElementById('box_22').style.background = "inherit";
            document.getElementById('box_23').style.background = "inherit";
            document.getElementById('box_31').style.background = "inherit";
            document.getElementById('box_32').style.background = "inherit";
            document.getElementById('box_33').style.background = "inherit";
            document.getElementById('cardMean').style.background = "inherit";
            document.getElementById('card').style.background = "inherit";
        }

        //设置九宫格的背景颜色
        function setBackground(id_1, id_2, id_3, color, str) {
            document.getElementById(id_1).style.background = color;
            document.getElementById(id_2).style.background = color;
            document.getElementById(id_3).style.background = color;
            document.getElementById('card').style.background = color;
            document.getElementById('card').innerHTML = str;
        }
        function colorShow(line_flag) {
            switch (line_flag) {
                case 'A':
                    setBackground('box_13', 'box_22', 'box_31', '#C0C0C0', str_A);
                    break;
                case 'B':
                    setBackground('box_13', 'box_23', 'box_33', '#FF00FF', str_B);
                    break;
                case 'C':
                    setBackground('box_12', 'box_22', 'box_32', '#00FFFF', str_C);
                    break;
                case 'D':
                    setBackground('box_11', 'box_21', 'box_31', '#FFFF00', str_D);
                    break;
                case 'E':
                    setBackground('box_11', 'box_22', 'box_33', '#22AADD', str_E);
                    break;
                case 'F':
                    setBackground('box_11', 'box_12', 'box_13', '#00FF00', str_F);
                    break;
                case 'G':
                    setBackground('box_21', 'box_22', 'box_23', '#FF0000', str_G);
                    break;
                case 'H':
                    setBackground('box_31', 'box_32', 'box_33', '#FFAA66', str_H);
                    break;
            }
        }
        $scope.line_light = function (e) {
            clearBox();
            line_flag = e.target.id;
            colorShow(line_flag);
        }

        choise_index = -1;
        $scope.num_chose = function (e) {
            if (!counts) return;
            if (!chosen_num) {
                chosen_num = e.target.innerHTML;
                e.target.innerHTML = '';
                choise_index = parseInt(chosen_num) - 1;
            } else if (choise_index >= 0) {
                document.getElementById('choise').getElementsByClassName('col')[choise_index].innerHTML = chosen_num;
                chosen_num = e.target.innerHTML;
                e.target.innerHTML = '';
                choise_index = parseInt(chosen_num) - 1;
            }
        }

        put_used_cell = new Array();
        $scope.num_put = function (e) {
            box_index = (e.target.id).split("_")[1]
            var box_index_num = (parseInt(box_index[0], 10) - 1) * 3 + (parseInt(box_index[1], 10) - 1);
            if (chosen_num && counts && !checkNumList(box_index_num, put_used_cell)) {
                e.target.innerHTML = chosen_num;
                box[box_index_num] = parseInt(chosen_num, 10)
                put_used_cell.push(box_index_num);
                chosen_num = 0;
                counts -= 1;
                choise_index = -1;
                clearBox();
                solve();
                console.log('box', box);
                console.log('ava_box', ava_box);
            }
        }

        // input_money = document.getElementsByTagName('input');
        // for(i = 0; i < input_money.length; i++){
        //     input_money[i].style.width = _width;
        // }

        document.getElementsByClassName('setting')[0].style.display = "none";
        show_setting = true;
        $scope.setting = function (e) {
            if (show_setting) {
                document.getElementsByClassName('setting')[0].style.display = "block";
            }
            else {
                document.getElementsByClassName('setting')[0].style.display = "none";
            }
            show_setting = !show_setting;
        }
    });
</script>

<body>
    <h3>FF14仙人微彩计算器</h3>
    <div class="bar bar-header bar-light">
        <h1 class="title">FF14仙人微彩计算器</h1>
    </div>

    <div ng-app="box" ng-controller="weicai" id="app">
        <div class="weicai">
            <div class="row">
                <div class="col" id="E" ng-mouseover="line_light($event)" ng-click="line_light($event)">E</div>
                <div class="col" id="D" ng-mouseover="line_light($event)" ng-click="line_light($event)">D</div>
                <div class="col" id="C" ng-mouseover="line_light($event)" ng-click="line_light($event)">C</div>
                <div class="col" id="B" ng-mouseover="line_light($event)" ng-click="line_light($event)">B</div>
                <div class="col" id="A" ng-mouseover="line_light($event)" ng-click="line_light($event)">A</div>
            </div>

            <div class="row">
                <div class="col" id="F" ng-mouseover="line_light($event)" ng-click="line_light($event)">F</div>
                <div class="col" ng-click="num_put($event)" id="box_11"></div>
                <div class="col" ng-click="num_put($event)" id="box_12"></div>
                <div class="col" ng-click="num_put($event)" id="box_13"></div>
                <div class="col">○</div>
            </div>

            <div class="row">
                <div class="col" id="G" ng-mouseover="line_light($event)" ng-click="line_light($event)">G</div>
                <div class="col" ng-click="num_put($event)" id="box_21"></div>
                <div class="col" ng-click="num_put($event)" id="box_22"></div>
                <div class="col" ng-click="num_put($event)" id="box_23"></div>
                <div class="col">○</div>
            </div>

            <div class="row">
                <div class="col" id="H" ng-mouseover="line_light($event)" ng-click="line_light($event)">H</div>
                <div class="col" ng-click="num_put($event)" id="box_31"></div>
                <div class="col" ng-click="num_put($event)" id="box_32"></div>
                <div class="col" ng-click="num_put($event)" id="box_33"></div>
                <div class="col">○</div>
            </div>

            <div class="row" id="choise">
                <div class="col" id="num1" ng-show="num" ng-click="num_chose($event)">1</div>
                <div class="col" id="num2" ng-show="num" ng-click="num_chose($event)">2</div>
                <div class="col" id="num3" ng-show="num" ng-click="num_chose($event)">3</div>
                <div class="col" id="num4" ng-show="num" ng-click="num_chose($event)">4</div>
                <div class="col" id="num5" ng-show="num" ng-click="num_chose($event)">5</div>
                <div class="col" id="num6" ng-show="num" ng-click="num_chose($event)">6</div>
                <div class="col" id="num7" ng-show="num" ng-click="num_chose($event)">7</div>
                <div class="col" id="num8" ng-show="num" ng-click="num_chose($event)">8</div>
                <div class="col" id="num9" ng-show="num" ng-click="num_chose($event)">9</div>
            </div>
        </div>

        <p></p>
        <div class="button-bar bar-light">
            <a class="button button-calm" ng-click="cal($event)">重新计算</a>
            <a class="button button-assertive" ng-click="reset()">重置</a>
            <a class="button button-dark" ng-click="setting($event)">设置</a>
        </div>
    </div>


    <div class="card setting">
        <div class="item item-text-wrap" id="set_content">
            <div class="row">
                <div class='col'>点数与奖励对照表</div>
            </div>
            <div class="row" id='number'>
                <div class="col">6</div>
                <div class="col">7</div>
                <div class="col">8</div>
                <div class="col">9</div>
                <div class="col">10</div>
                <div class="col">11</div>
                <div class="col">12</div>
                <div class="col">13</div>
                <div class="col">14</div>
                <div class="col">15</div>
                <div class="col">16</div>
                <div class="col">17</div>
                <div class="col">18</div>
                <div class="col">19</div>
                <div class="col">20</div>
                <div class="col">21</div>
                <div class="col">22</div>
                <div class="col">23</div>
                <div class="col">24</div>
            </div>

            <div class="row" id='money'>
                <div class="col">10000</div>
                <div class="col">36</div>
                <div class="col">720</div>
                <div class="col">360</div>
                <div class="col">80</div>
                <div class="col">252</div>
                <div class="col">108</div>
                <div class="col">72</div>
                <div class="col">54</div>
                <div class="col">180</div>
                <div class="col">72</div>
                <div class="col">180</div>
                <div class="col">119</div>
                <div class="col">36</div>
                <div class="col">306</div>
                <div class="col">1080</div>
                <div class="col">144</div>
                <div class="col">1800</div>
                <div class="col">3600</div>
            </div>
        </div>
    </div>
    <div class="show">
        <div class="card">
            <div class="item item-text-wrap" id="cardMean">
            </div>
        </div>
        <div class="card">
            <div class="item item-text-wrap" id="card">
            </div>
        </div>
    </div>

    <div class="bar bar-footer">
        <div class="title">本计算器还在完善中，数据仅供参考</div>
    </div>
</body>


</html>